<script setup>
import {onMounted, reactive, ref} from "vue";
import {userStore} from '@pi/user';
import ImportDialog from "@/component/ImportDialog.vue";

let user = userStore();
let options = reactive({
    pageNo: 1,
    pageSize: 10,
    nickname: '',
    role: 1
});
let dialog = reactive({
    show: false,
    loading: false,
    type: 0,
    form: {},
    rules: {
        nickname: {required: true, message: '请输入姓名', trigger: 'change'},
        account: {required: true, message: '请输入账号', trigger: 'change'},
        password: {required: true, message: '请输入密码', trigger: 'change'},
        gender: {required: true, message: '请选择性别', trigger: 'change'},
        phone: [
            {required: true, message: '请输入手机号', trigger: 'change'},
            {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change'},
        ]
    },
    open(type = 0, e = {role: 1, gender: '男'}) {
        dialog.type = type;
        dialog.form = {...e};
        dialog.show = true;
    },
    close() {
        dialog.show = false;
        dialog.loading = false;
        formRef.value.resetFields();
    }
});
let formRef = ref(null);
let importSwitch = ref(false);

// 刷新
function refresh() {
    options.pageNo = 1;
    options.nickname = '';
    user.get(options);
}

// 添加 or 修改
function submit() {
    formRef.value.validate(async e => {
        if (e) {
            dialog.loading = true;
            await user[dialog.type ? 'update' : 'create'](dialog.form);
            dialog.close();
            user.get(options);
        }
    });
}

// 删除
async function remove(id) {
    await user.remove(id);
    user.get(options);
}

// ImportDialog 提交事件
async function ImportDialogSubmit(e) {
    await user.writer(e);
    user.get(options);
    importSwitch.value = false;
}

onMounted(() => {
    user.get(options);
})
</script>

<template>
    <h5 class="title">宿管员管理</h5>
    <el-form :model="options" inline size="small">
        <el-form-item label="姓名">
            <el-input v-model="options.nickname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain icon="Search" @click="user.get(options)">搜索</el-button>
            <el-button type="warning" icon="Refresh" plain @click="refresh">刷新</el-button>
            <el-button type="success" icon="Plus" plain @click="dialog.open()">添加</el-button>
            <el-button type="primary" icon="Download" plain @click="user.reader(1)">导出</el-button>
            <el-button type="success" icon="Upload" plain @click="importSwitch = true">导入</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="user.list" style="height: calc(100% - 120px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="nickname" label="姓名" align="center" />
        <el-table-column prop="account" label="账号" align="center" />
        <el-table-column prop="gender" label="性别" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="time" label="注册时间" align="center" />
        <el-table-column label="操作" align="center" width="240" fixed="right">
            <template #default="{row}">
                <el-button type="primary" link icon="Edit" @click="user.resettingPassword(row.id)">重置密码</el-button>
                <el-button type="warning" link icon="Edit" @click="dialog.open(1, row)">修改</el-button>
                <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="user.total" small @current-change="user.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>

    <el-dialog :title="dialog.type ? '修改宿管员' : '添加宿管员'" v-model="dialog.show" width="600px" @close="dialog.close" draggable>
        <el-form ref="formRef" :model="dialog.form" :rules="dialog.rules" v-loading="dialog.loading" label-width="80px">
            <el-form-item label="姓名" prop="nickname">
                <el-input v-model="dialog.form.nickname" placeholder="请输入姓名" :maxlength="32" clearable />
            </el-form-item>
            <el-form-item label="账号" prop="account">
                <el-input v-model="dialog.form.account" placeholder="请输入账号" :maxlength="32" clearable />
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="!dialog.type">
                <el-input v-model="dialog.form.password" type="password" placeholder="请输入密码" :maxlength="32" show-password />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="dialog.form.gender">
                    <el-radio label="男" value="男" />
                    <el-radio label="女" value="女" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="dialog.form.phone" placeholder="请输入手机号" :maxlength="11" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="dialog.close">取消</el-button>
        </template>
    </el-dialog>

    <ImportDialog :show="importSwitch" temp="user" @submit="ImportDialogSubmit" @close="importSwitch = false" />
</template>

<style scoped lang="less"></style>